<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./css/style.css"> <!-- 加载CSS文件 -->
</head>

<body>

<!-- 4. box核心内容区域开始 -->
<div class="版面 版心居中">
    <div class="版面-标题">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
    </div>
    <div class="版面-展示">
        <ul>
            <!--            <li>-->
            <!--                <a href="#">-->
            <!--                    <img src="images/course01.png" alt="">-->
            <!--                    <h4>-->
            <!--                        Think PHP 5.0 博客系统实战项目演练-->
            <!--                    </h4>-->
            <!--                    <div class="信息">-->
            <!--                        <span>高级</span> • <span>1125</span>人在学习-->
            <!--                    </div>-->
            <!--                </a>-->
            <!--            </li>-->
        </ul>
    </div>
</div>

<script>
    // li标签 部分的代码, 使用JS循环的方式渲染
    // 声明数组, 存放数据
    let 数组_渲染要的数据 = [
        {
            路径: 'images/course01.png',
            标题: 'Think PHP 5.0 博客系统实战项目演练',
            数: 1125
        },
        {
            路径: 'images/course02.png',
            标题: 'Android 网络动态图片加载实战',
            数: 357
        },
        {
            路径: 'images/course03.png',
            标题: 'Angular2 大前端商城实战项目演练',
            数: 22250
        },
        {
            路径: 'images/course04.png',
            标题: 'Android APP 实战项目演练',
            数: 389
        },
        {
            路径: 'images/course05.png',
            标题: 'UGUI 源码深度分析案例',
            数: 124
        },
        {
            路径: 'images/course06.png',
            标题: 'Kami2首页界面切换效果实战演练',
            数: 432
        },
        {
            路径: 'images/course07.png',
            标题: 'UNITY 从入门到精通实战案例',
            数: 888
        },
        {
            路径: 'images/course08.png',
            标题: 'Cocos 深度学习你不会错过的实战',
            数: 590
        },
    ]

    /* 声明这里使用，DOM节点的方式 溢出渲染
    学成在线案例渲染
    需求：按照数据渲染页面
    分析：
    ①：准备好空的ul 结构
    ②：根据数据的个数，创建一个新的空li
    ③：li里面添加内容 img 标题等
    ④：追加给ul
    重点练习：创建节点和追加节点
    */


    // 获取DOM元素
    const ul标签 = document.querySelector('ul')

    // 循环增加节点，添加li标签
    for (let i = 0; i < 数组_渲染要的数据.length; i++) {
        // 创建节点, 节点是要一一创建的，所以是加在循环里
        const li标签 = document.createElement('li') // 节点,li标签

        // 把内容给li标签， 再次提醒引号是 反引号
        li标签.innerHTML = `
        <a href="#">
            <img src="${数组_渲染要的数据[i].路径}" alt="">
            <h4>
                ${数组_渲染要的数据[i].标题}
            </h4>
            <div class="信息">
                <span>高级</span> • <span>${数组_渲染要的数据[i].数}</span>人在学习
            </div>
        </a>
       `

        ul标签.appendChild(li标签) // 在父级里,追加子级. 这里是追加一个li标签
    }

    // 这个是使用DOM节点的方法，重构了代码。 是DOM_增加节点 的案例
</script>

</body>

</html>